@import 'mixins';

@include b(nav-bar) {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: var(--nav-bar-height);
  background: var(--nav-bar-color);

  @include e(title) {
    position: absolute;
    left: 50%;
    white-space: nowrap;
    font-size: r(18);
    font-weight: 500;
    transform: translate(-50%, 0);
  }

  @include e(side) {
    display: flex;
    justify-content: center;

    @include m(left) {
      margin-left: r(16);
    }

    @include m(right) {
      margin-right: r(16);
    }
  }
}
